<template>
  <div id="business">
                   <!-- 头部区域 -->
                     <!-- 查询区域 -->
    <div class="hearder">
      <el-card class="card">
     <el-row style="height: 40px; width: 100%;">
         <el-col :span="24">
          <div class="grid-content bg-purple-dark">
<el-form :inline="true" :model="formInline" :ref="ruleForm"  class="demo-form-inline">
  <el-form-item label="工单编号" prop="input">
    <el-input v-model="allsearch.taskCode" placeholder="请输入"></el-input>
  </el-form-item>
  <el-form-item label="工单状态" prop="sele">
    <el-select v-model="allsearch.status" placeholder="请选择">
      <el-option
      v-for="item in alls"
      :key="item.statusId"
       :label="item.statusName"
       :value="item.statusId">
       </el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
</el-form>
          </div>
          </el-col>
      </el-row>
      </el-card>
    </div>
                  <!-- 中间区域 -->
    <div class="opan">
       <!-- 中间信息区域 -->
      <el-card class="cards">
    <el-row class="next">
       <el-col :span="24">
             <div class="bg-purple-dark">
         <el-button icon="el-icon-circle-plus" type="danger" @click="butt">新建</el-button>

                                       <!-- 新增工单弹窗区域 -->
         <el-dialog title="新增工单" :visible="dialogVisible" @close="dialogClose" width="35%">
 <el-form :model="ruleForm" :rules="rules" ref="ruleForms" label-width="100px" class="demo-ruleForm">
                                        <!-- 设备编号 -->
      <el-form-item label="设备编号：" prop="innerCode">
           <el-input v-model="ruleForm.innerCode" placeholder="请输入" maxlength="15" show-word-limit @input="inp"></el-input>
  </el-form-item>

                                          <!-- 工单类型 -->
  <el-form-item label="工单类型：" prop="productType">
    <el-select v-model="ruleForm.productType" placeholder="请选择">
      <el-option
      v-for="item in Task"
      :key="item.typeId"
      :label="item.typeName"
      :value="item.typeId">
      </el-option>
    </el-select>
  </el-form-item>

                 <!-- 补货清单 -->
  <el-form-item label="补货数量：" >
    <div class="buhuo" >
      <i class="el-icon-document" @click="buhuo"></i>
      <span>补货清单</span>
    </div>
  </el-form-item>
                  <!-- 运营人员 -->
    <el-form-item label="运营人员:" prop="userId">
   <el-select v-model="ruleForm.userId" placeholder="请选择">
      <el-option
      v-for="item in opes"
      :key="item.userId"
      :label="item.userName"
      :value="item.userId">
      </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="备注" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc" placeholder="请输入备注(不超过40字)" maxlength="40" show-word-limit></el-input>
  </el-form-item>
</el-form>
                  <span slot="footer" class="dialog-footer" >
                  <el-button @click="dialogClose">取 消</el-button>
                    <el-button type="primary" @click="sumbit">确 定</el-button>
  </span>
              </el-dialog>

                                           <!-- 补货详情弹窗开始 -->
  <el-dialog title="补货详情" :visible="dialogVisibles" @close="dialogCloses" width="50%">
        <div class="bg-purpledark">
  <el-table style="width: 100%;" :data="datas">
  <el-table-column prop="channelCode" label="货道编号" width="100"></el-table-column>
  <el-table-column prop="sku.brandName" label="商品名称" width="100"></el-table-column>
  <el-table-column prop="currentCapacity" label="当前数量" width="100"></el-table-column>
  <el-table-column prop="maxCapacity" label="还可添加" width="120"></el-table-column>
  <el-table-column align="center" label="补满数量" width="200" height="45">
     <template slot-scope="{row}">
  <el-input-number
  v-model="row.currentCapacity"
   controls-position="right"
   @change="handleChange"
   :min="0" :max="10">
  </el-input-number>
          </template>
  </el-table-column>
    </el-table>
    </div>
       <span slot="footer">
    <el-button @click="dialogVisibles = false">取消</el-button>
    <el-button type="primary" @click="dialogsum">确定</el-button>
    </span>
                         </el-dialog>
                                           <!-- 补货详情弹窗尾部 -->

                                             <!-- 工单配置区域 -->
          <el-button  plain class="gongdan" @click="gong">工单配置</el-button>
          <el-dialog  title="提示" :visible="dialogVisibler"  width="40%" @close="dialogClosesr">
<el-form><el-form-item label="补货警戒线" >
<el-input-number v-model="num2" size="medium" controls-position="right" style="width:80%;heigth:10%;" :min="1" :max="10"></el-input-number>
</el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogClosesr">取 消</el-button>
    <el-button type="primary">确 定</el-button>
            </span>
             </el-dialog>
                                               <!-- 工单配置区域尾部 -->
           </div>
           </el-col>
                                                <!-- 表格信息显示区域开始 -->

          <div class="bg">
            <el-table style="width: 100%;" :data="currPage">
  <el-table-column label="序号" prop="index"  align="center" type="index"  width="70" >
      <template slot-scope="scope">
                    <span>{{ scope.$index + (allsearch.pageIndex - 1) * allsearch.pageSize + 1 }}</span>
                </template>
  </el-table-column>
  <el-table-column prop="taskCode" label="工单编号" width="140"></el-table-column>
  <el-table-column prop="innerCode" label="设备编号" width="140"></el-table-column>
  <el-table-column prop="taskType.typeName" label="工单类型" width="140"></el-table-column>
  <el-table-column prop="createType" label="工单方式" width="140">
    <template #default="{ row }">
               {{ createtype[row.createType] }}
  </template>
  </el-table-column>
  <el-table-column prop="taskStatusTypeEntity.statusName" label="工单状态" width="140"></el-table-column>
  <el-table-column prop="userName" label="运营人员" width="130"></el-table-column>

  <el-table-column prop="updateTime" label="创建日期" width="160">
    <template v-slot="scoped">
      {{scoped.row.createTime | toUp}}
    </template>
  </el-table-column>

  <el-table-column   label="操作" width="130">
    <template><el-button type="text" size="small" @click="chakan">查看详情</el-button></template>
  </el-table-column>
    </el-table>
      <!-- 查看详情弹窗区域 -->
<el-dialog title="提示" :visible="dialo" width="35%" @close="dialogs">
  <el-card >
    <el-row class="ers">
      <el-col :span="24"><div >
    <div class="er">
    <span class="el-icon-info">取消</span>
     <img src="http://likede2-admin.itheima.net/img/pic_3.e8208e34.png" alt="">
    </div>
    </div>
    </el-col>
</el-row>
<el-row class="aer">
 <el-col :span="12"><div >
  <el-descriptions>
 <el-descriptions-item label="设备编号">01000064</el-descriptions-item>
  </el-descriptions>
  </div>
  </el-col>
  <el-col :span="12"><div>
     <el-descriptions>
 <el-descriptions-item label="创建日期">2022.10.19 20:12:15</el-descriptions-item>
  </el-descriptions>
    </div>
    </el-col>
    <el-col :span="12"><div>
     <el-descriptions>
 <el-descriptions-item label="取消日期">2022.10.19 20:32:15</el-descriptions-item>
  </el-descriptions>
    </div>
    </el-col>
    <el-col :span="12"><div>
     <el-descriptions>
    <el-descriptions-item label="运营人员">运营邱元明</el-descriptions-item>
  </el-descriptions>
    </div>
    </el-col>
    <el-col :span="12"><div>
     <el-descriptions>
    <el-descriptions-item label="工单类型">补货工单</el-descriptions-item>
  </el-descriptions>
    </div>
    </el-col>
    <el-col :span="12"><div>
     <el-descriptions>
   <el-descriptions-item label="补货数量">补货详情</el-descriptions-item>
            </el-descriptions>
    </div>
    </el-col>
    <el-col :span="12"><div>
     <el-descriptions>
     <el-descriptions-item label="工单方式">手动</el-descriptions-item>
  </el-descriptions>
    </div>
    </el-col>
    <el-col :span="12"><div>
     <el-descriptions>
   <el-descriptions-item label="取消原因"></el-descriptions-item>
  </el-descriptions>
    </div>
    </el-col>
</el-row>
  </el-card>

  <span slot="footer"  >
    <el-button class="chongj" @click="dialogs">重新创建</el-button>
  </span>
</el-dialog>
                                   <!-- 分页 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          :current-page="allsearch.pageIndex"
          :page-size="allsearch.pageSize"
          :total="total"
          layout="total,prev, pager, next"
          hide-on-single-page
          @current-change="handleCurrentChange"
        />
      </el-row>
                                  </div>
                             <!-- 表格信息显示区域尾部 -->
      </el-row>
          </el-card>
    </div>
  </div>

</template>

<script>
import { alltask, allSearch, Channe, operator, taskType } from '@/api'
export default {
  data () {
    return {
      num: 1,
      num2: 1,
      opes: [], // 运营人员数据
      Task: [], // 所有工单类型数据
      dialo: false,
      ruleFormr: {
        name: ''
      },
      datas: [], // 补货详情数据
      ruleForm: {
        innerCode: '',
        productType: '',
        details: '',
        createType: '',
        userId: '',
        desc: ''
      }, // 新增工单弹窗的表格信息
      rules: {
        innerCode: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        productType: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        userId: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }, // 新增工单弹窗的校验
      dialogVisible: false, // 新建弹窗
      dialogVisibles: false, // 补货详情弹窗
      dialogVisibler: false, // 工单配置弹窗
      alls: [], // 选择列表数据
      currPage: [], // 表格列表数据
      formInline: {
        user: '',
        region: ''
      },
      total: 0, // 总页数
      createtype: {
        0: '自动',
        1: '手动'
      },
      allsearch: {
        pageIndex: 1, // 当前页面
        pageSize: 10, // 每页显示数量
        isRepair: false,
        taskCode: '', // 工单编号
        status: ''// 工单状态
      } // 分页的数据
    }
  },
  // 去除日期当中大写T
  filters: {
    toUp (val) {
      return val.split('T').join(' ')
    }
  },
  async created () {
    // 工单状态列表数据
    const all = await alltask()
    this.alls = all.data
    // 获取所有工单类型
    const task = await taskType()
    this.Task = task.data
    this.getTaskSearch()
    this.channes()
  },
  methods: {
    async inp (valu) {
      // 获取补货详情数据
      const chan = await Channe(valu)
      this.datas = chan.data
      // 获取运营人员数据
      const ope = await operator(valu)
      this.opes = ope.data
    },
    handleChange (value) {
      console.log(value)
    },
    // 工单表格数据接口
    async getTaskSearch () {
      const allsear = await allSearch(this.allsearch)
      this.currPage = allsear.data.currentPageRecords
      this.total = Number(allsear.data.totalCount)// 获取总页数
    },
    // 分页
    handleCurrentChange (value) {
      this.allsearch.pageIndex = value
      this.getTaskSearch()
    },
    // 查询
    async onSubmit () {
      this.getTaskSearch()
    },

    // 工单配置
    gong () {
      this.dialogVisibler = true
    },
    dialogClosesr () {
      this.dialogVisibler = false
      this.$refs.ruleForms.resetFields()
    },

    // 新增工单确定信息
    sumbit () {

    },
    // 点击新建，打开新增工单弹窗
    butt () {
      this.dialogVisible = true
    },
    dialogClose () {
      this.dialogVisible = false
      // this.$refs.ruleForms.resetFields() // 重置表单
    },
    async channes () {
    },
    // 点击补货清单，打开补货详情弹窗
    async  buhuo () {
      this.dialogVisibles = true
      this.dialogVisible = false
    },
    // 补货详情确定
    async dialogsum () {
      this.dialogVisibles = false
      this.dialogVisible = true
    },
    dialogCloses () {
      this.dialogVisibles = false
    },
    // 查看详情区域
    chakan () {
      this.dialo = true
    },
    dialogs () {
      this.dialogVisible = true
      this.dialo = false
    }
  }
}
</script>

<style scoped lang='less'>
.hearder{
  padding: 10px;
.card{
 padding: 5px
}
}
.opan{
  padding: 10px;
  .cards{
 padding: 5px
  }
}
.next{
  .gongdan{
    margin-left: 10px;
  }
  .buhuo{
    color: #5f84ff;
  }
  .ers{
   padding: 10px;
   height: 20%;
  //  align-items: center;
 background-color: hsla(0,0%,92.5%,.39);
   span{
    font-size: 15px;
   }
   img{
    width: 70px;
   }
     .er{
  display: flex;
  justify-content: space-between;
  align-items: center;
  }
  }
    .aer{
    margin-top: 20px;
  }
.chongj{
      background-color: #fbf4f0!important;
    border: none;
    color: #655b56!important;
}
}
</style>
